import React from 'react';
import { Form, Input, Button, Space, Select, Tooltip, Row, Col } from 'antd';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { adminCompanyType } from '@/utils/constant';

const Search = (props: any) => {
  const [form] = Form.useForm();
  const { callbackValue, loading } = props;
  const onReset = () => {
    form.resetFields();
    callbackValue({});
  };
  const onFinish = (values: any) => {
    callbackValue(values);
  };
  return (
    <Form
      style={{ display: 'flex', flex: 1, flexWrap: 'wrap' }}
      form={form}
      name="control-hooks"
      onFinish={onFinish}
    >
      <Form.Item
        name="productCompany"
        style={{ margin: 0, width: 150, marginBottom: 8 }}
      >
        <Select placeholder={'请选择分公司'}>
          {adminCompanyType.map(item => (
            <Select.Option key={item.value} value={item.value}>
              {item.label}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item
        name="orderNo"
        style={{ margin: 0, width: 150, marginBottom: 8 }}
      >
        <Input placeholder={'请输入订单号'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="productName" style={{ margin: 0, width: 150 }}>
        <Input placeholder={'请输入品名'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="color" style={{ margin: 0, width: 150 }}>
        <Input placeholder={'请输入颜色'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="attribute" style={{ margin: 0, width: 150 }}>
        <Input placeholder={'请输入属性'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="spec" style={{ margin: 0, width: 150 }}>
        <Input placeholder={'请输入规格'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="customerCompany" style={{ margin: 0, width: 150 }}>
        <Input placeholder={'请输入客户单位'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item style={{ margin: 0, width: 150 }}>
        <Tooltip title="搜索">
          <Button
            disabled={loading}
            type="primary"
            htmlType="submit"
            icon={<SearchOutlined />}
          />
        </Tooltip>
        <span style={{ padding: 4 }} />
        <Tooltip title="重置">
          <Button
            htmlType="button"
            onClick={onReset}
            icon={<ReloadOutlined />}
          />
        </Tooltip>
      </Form.Item>
    </Form>
  );
};

export default Search;
